<template>
	<view class="menu_content">
		<view v-if="userType == '家长'">
			<view class="qr_code">
				<view>
					<text>Alipay QR code</text>
					<image style="width: 6rem; height: 9rem; margin-top: 15px;  border: 1px solid #ccc;" @tap="savePic(utils.localURL + '/' + payData.payAlipayQrCodePath)" :src="utils.localURL + '/' + payData.payAlipayQrCodePath"></image>
				</view>
				<view style="margin-left: 5px;">
					<text>Wechat QR code</text>
					<image style="width: 6rem; height: 9rem; margin-top: 15px;  border: 1px solid #ccc; " @tap="savePic(utils.localURL + '/' + payData.payWechatQrCodePath)" :src="utils.localURL + '/' + payData.payWechatQrCodePath"></image>
				</view>
			</view>
			<view class="bank_info">
				<view>
					 Account Name：
					<text style="color: #666;">{{ payData.payBankAccount }}</text>
				</view>
				<view>
					 Bank Name：
					<text style="color: #666;">{{ payData.payBankName }}</text>
				</view>
				<view>
					Account Number：
					<text style="color: #666;">{{ payData.payBankPayee }}</text>
				</view>
				<view>
					SWIFT Code：
					<text style="color: #666;">{{ payData.payBankSwift }}</text>
				</view>
			 
				 
			</view>
		</view>
		<view v-if="userType == '监护人'">
			<view v-if="!!stuList.length" class="stu_list">
				<view class="stu_item" v-for="(item, index) in stuList" :key="index" @tap="goStuInfo(item)">
					<image :src="!!item.stuPhotoPath ? utils.localURL + '/' + item.stuPhotoPath : ''"></image>
					<view>
						<view class="stu_info">
							<view style="margin-right: 20px;">Name：{{ item.userName }}</view>
						</view>
						<view class="service_term">School Name：{{ item.schoolName }}</view>
					</view>
					<text class="iconfont_icon">&#xe630;</text>
				</view>
			</view>
			<view v-else class="nothing"><image src="../../static/img/nothing.png"></image></view>
		</view>
		<bar indexActive="1" :tabList="tabList"></bar>
	</view>
</template>

<script>
import bar from '../../components/tabBar.vue';
import homeHL from '../../static/img/homeHL.png';
import homeUN from '../../static/img/home.png';
import myHL from '../../static/img/userHL.png';
import myUN from '../../static/img/user.png';
import payHL from '../../static/img/iconPayHL.png';
import payUN from '../../static/img/iconPay.png';
import listHL from '../../static/img/iconListHL.png';
import listUN from '../../static/img/iconList.png';
import api from '../../api/otherApi.js';
import utils from '../../api/utils.js';
import txImg from '../../static/img/avatarImg.jpeg';

export default {
	data() {
		return {
			userType: '',
			utils: utils,
			tabList: [
				{
					name: 'Home',
					imgPL: homeHL,
					imgUN: homeUN,
					url: '../index/index'
				},
				{},
				{
					name: 'Mine',
					imgPL: myHL,
					imgUN: myUN,
					url: '../my/my'
				}
			],
			payObj: {
				name: 'Payment',
				imgPL: payHL,
				imgUN: payUN,
				url: '../bottomMenu/bottomMenu'
			},
			stuListObj: {
				name: 'Students',
				imgPL: listHL,
				imgUN: listUN,
				url: '../bottomMenu/bottomMenu'
			},
			stuList: [],
			payData: {}
		};
	},
	components: { bar },
	methods: {
		goStuInfo(item) {
			console.log(item);
			uni.navigateTo({
				url: `./stuInfo?id=${item.userId}`
			});
		},
		savePic(picUrl) {
			console.log(picUrl);
			uni.previewImage({
				urls: [picUrl],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						uni.saveImageToPhotosAlbum({
							filePath: picUrl,
							success: function() {
								console.log('save success');
							}
						});
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		}
	},
	onShow() {
		let _this = this;
		let barTitle = '';
		let token = '';
		uni.getStorage({
			key: 'token',
			success(res) {
				token = res.data;
			}
		});
		uni.getStorage({
			key: 'userInfo',
			async success(res) {
				_this.userType = res.data.userType;
				uni.showLoading({
					title: 'Please wait...',
					mask: true
				});
				if (res.data.userType == '家长') {
					_this.tabList.splice(1, 1, _this.payObj);
					barTitle = 'Pay';
					let data = await api.getPayList(
						'pay/getGruSysPayList',
						{
							current: 1,
							size: 20
						},
						token
					);
					if (data.head.status) {
						_this.payData = data.body[0];
						console.log(_this.payData);
					} else {
						uni.showToast({
							title: data.head.msg,
							icon: 'none',
							duration: 2000
						});
					}
				} else if (res.data.userType == '监护人') {
					_this.tabList.splice(1, 1, _this.stuListObj);
					barTitle = 'Student List';
					let data = await api.getStuList(
						'user/getStuList',
						{
							stuGurdianId: res.data.userId,
							current: 1,
							size: 50
						},
						token
					);
					if (data.head.status) {
						_this.stuList = data.body;
					} else {
						uni.showToast({
							title: data.head.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}
				uni.hideLoading();
			}
		});
		uni.setNavigationBarTitle({
			title: barTitle
		});
	}
};
</script>

<style scoped>
.menu_content {
	width: 100%;
}

.stu_tel_list,
.stu_list {
	width: 100%;
	padding: 20px 30px;
	box-sizing: border-box;
}

.stu_tel_item {
	width: 100%;
	padding: 20px 5px;
	border-bottom: solid 1px #dfdfdf;
	box-sizing: border-box;
	color: #666;
}

.stu_item {
	width: 100%;
	padding: 20px 5px;
	border-bottom: solid 1px #5dc9ff;
	box-sizing: border-box;
	color: #0faeff;
	position: relative;
	display: flex;
	align-items: center;
}

.stu_item image {
	width: 60px;
	height: 60px;
	margin-right: 15px;
}

.stu_item .iconfont_icon {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	color: #0599d7;
}

.stu_item .stu_info {
	display: flex;
	justify-content: flex-start;
	font-size: 14px;
	margin-bottom: 10px;
}

.stu_item .service_term {
	font-size: 14px;
	color: #f0ad4e;
}

.bank_info {
	width: 100%;
	padding: 20px 30px;
	box-sizing: border-box;
	margin-bottom: 55px;
}

.bank_info view {
	padding: 0 15px;
}

.bank_info view  {
	color: #999;
	margin-bottom: 15px;
	font-size: 14PX;
	  border-bottom: 1px solid #ccc;
	  line-height: 20px;
}

.qr_code {
	width: 100%;
	padding: 20px 30px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.qr_code view {
	text-align: center;
}

.nothing {
	width: 100%;
	text-align: center;
}

.nothing image {
	width: 150px;
	height: 150px;
	margin-top: 50%;
}
</style>
